<template>
  <div class="mainTopChild">
    <span class="topTitle">职位起始薪资分布比例图</span>
    <!-- 图表容器 DOM -->
    <div id="container" style="width: 97%; height: 85%; margin-top: 40px"></div>
  </div>
</template>

<script>
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";
HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
export default {
  name: "mainTopChild",
  data() {
    return {
      options: {
        colors:['#007dec','#00999e','#d44cee','#e66e4c','#e5de2b'],//改变饼图每块的颜色
        chart: {
          backgroundColor: "#040964",
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 60, //图形倾斜角度
          },
          margin: null,
          width: 300,
          height: 300,
        },
        title: {
          text: "",
          x: -50,
        },
        credits: {
          enabled: false, //不显示LOGO
        },
        plotOptions: {
          pie: {
            size: "130%", //图形大小
            innerSize: 120,
            depth: 35, //图形高度
            center: ["10%", "50%"],
            dataLabels: {
              enabled: false,
            },
            showInLegend: true,
          },
          area: {
            color: "#051238",
          },
        },
        legend: {
          layout: "vertical",
          align: "right",
          verticalAlign: "top",
          y: 82,
          x:85,
          padding: 3,
          itemMarginTop: 5,
          itemMarginBottom: 5,
          itemStyle: {
            lineHeight: "14px",
            color:'#a7b5ff',
            fontSize:'14px'
          },
        },
        series: [
          {
            name: "货物金额",
            data: [
              ["10000元(不含)及以上", 8],
              ["9000-9999元", 7],
              ["8000-8999元", 6],
              ["7000-7999元", 6],
              ["6000-6999元", 5],
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.moreChart();
  },
  methods: {
    moreChart() {
      if (this.chart) {
        this.chart.destroy();
      }
      // 初始化 Highcharts 图表
      this.chart = new Highcharts.Chart("container", this.options);
    },
  },
};
</script>

<style lang="less" scoped>
.mainTopChild {
  height: 320px;
  margin-bottom: 12px;
  position: relative;
  background: url("../../../assets/数据屏/右1@2x.png") no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  .topTitle {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    color: #fefffb;
    font-weight: 700;
    font-size: 15px;
  }
  #container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /deep/.highcharts-container {
      position: absolute !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 100% !important;
      height: 100% !important;
      .highcharts-root {
        width: 100%;
        height: 100%;
        position: relative !important;
        .highcharts-background {
          position: absolute !important;
          left: 50% !important;
          transform: translateX(-50%) !important;
          width: 200% !important;
          height: 100% !important;
          background-color: #051238 !important;
        }
        .highcharts-series-group{
          position: absolute !important;
            padding-left: 20px !important;
            left: 20px !important;
          .highcharts-series{
            
          }
        }
      }
    }
  }
}
</style>
